import { Link, Navigate, Outlet, useLocation } from "react-router";
import useMeStore from "../../store/me";

export default function SettingPage() {
  const meStore = useMeStore();
  const location = useLocation();

  if (meStore.me.type === "init") {
    return <Navigate to="/login" />;
  }

  return (
    <div className="flex flex-col items-center mt-4">
      <ul className="menu menu-horizontal bg-base-200 rounded-box">
        <li>
          <Link
            to="/settings/profile"
            className={`menu-item ${location.pathname === "/settings/profile" ? "menu-active" : ""}`}
          >
            个人资料
          </Link>
        </li>
        <li>
          <Link
            to="/settings/agreements"
            className={`menu-item ${location.pathname === "/settings/agreements" ? "menu-active" : ""}`}
          >
            协议设置
          </Link>
        </li>
      </ul>
      <div className="w-6xl">
        <Outlet />
      </div>
    </div>
  );
}
